import { Outlet, history, useLocation } from 'umi'
import { useEffect, useState } from 'react'
import { Popup } from 'antd-mobile'
import PopupMenu from '../components/popupMenu'
import Header from '../components/header'

const Layout = () => {
  const location = useLocation()
  const token = localStorage.getItem('token')
  const [visible, setVisible] = useState<boolean>(false)

  useEffect(() => {
    if (!token && location.pathname !== '/login') {
      history.push('/login')
    }
  }, [history])

  const setPopupVisible = (e: boolean) => {
    setVisible(e)
  }

  return (
    <div style={{ width: '100%' }}>
      {location.pathname !== '/login' && location.pathname !== '/register' && <Header menuChange={() => setVisible(true)} />}
      <Popup
        visible={visible}
        onMaskClick={() => {
          setVisible(false)
        }}
        bodyStyle={{ maxWidth: '260px', width: '60vw' }}
        onClick={(e) => e.stopPropagation()}
        position='left'
      // bodyStyle={{ width: '60vw' }}
      >
        <PopupMenu popupVisible={visible} setPopupVisible={(e: boolean) => setPopupVisible(e)} />
      </Popup>
      <Outlet />
    </div>
  )
}

export default Layout